<template>
    <van-cell>
      <template #title>
       <div class="title">
        <div>{{artcle.title}}</div>
        <!-- 一张图片 -->
        <img  v-lazy="artcle.cover.images[0]" alt=""
            v-if="artcle.cover.type === 1">
            <!-- 如果图片出现错误，显示不出来，就提示加载失败 -->
        <!-- <van-image :src="artcle.cover.images[0]" alt=""
            v-if="artcle.cover.type === 1">
            <template v-slot:error>图片走丢了</template>
        </van-image> -->
      </div>
        <!-- 多张图片 -->
      <div class="imgs" v-if="artcle.cover.type >1">
        <img  v-lazy="art"  v-for="(art,index) in artcle.cover.images" :key="index"/>
        <!-- <van-image :src="art"  v-for="(art,index) in artcle.cover.images" :key="index">
          <template v-slot:error>加载失败</template>
        </van-image> -->
      </div>
      </template>
     <template #label>
        <div class="lable">
        <span>{{artcle.aut_name}}</span>
        <span>{{artcle.comm_count}}评论</span>
        <span>{{formatTime(artcle.pubdate)}}</span>
          <!-- 反馈按钮 -->
          <!-- @click.stop阻止反馈按钮的事件冒泡  因为我们给引用ArtItem组件的身上绑定了点击事件，
          就相当于在ArtItem组件的最外层标签van-cell绑定了点击事件，这样会有一个事件委派的效果，只要点击van-cell内的标签都会触发van-cell的点击事件
          所以我们点击反馈按钮也会触发事件委派，事件委派又是利用到了事件冒泡，所以我们阻止反馈按钮的事件冒泡即可
          -->
        <van-icon name="cross" @click.stop="show = true" v-show="isShow"/>
        <!-- 反馈面板 -->
        <van-action-sheet v-model="show" :actions="Actions"  :cancel-text="bottomText"
        @cancel="onCancel" className="name" get-container="body" @select="onSelect" @click-overlay='overlay'/>
      </div>
     </template>
    </van-cell>
</template>

<script>
// 目标1: 点击"反馈垃圾内容"数据的切换
// 1. 监听点击事件, 区分用户点击的是哪一个
// 2. 切换actions数组里数据

// 目标2: 二级反馈数据出现, 取消按钮文字要换成"返回"
// :cancel-text="bottomText" 设置变量, onSelect中, 把变量值换成"返回"

// 目标3: 点击底部按钮, 要区分判断
// 1. 标签@cancel取消事件和事件方法
// 2. 在里面用bottomText的值, 判断用户点击的是否为"返回"
// 把actions数据源换会成firstActions
// bottomText文字换成"取消"
// 强制让反馈面板show = true留下
import { Toast } from 'vant'
import { timeAgo } from '@/utils/date.js'
export default {
  data () {
    return {
      show: false,
      Actions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }],
      secondActions: [{ value: 0, name: '其它问题' }, { value: 1, name: '标题夸张' }, { value: 2, name: '低俗色情' },
        { value: 3, name: '错别字多' }, { value: 4, name: '旧闻重复' }, { value: 6, name: '内容不实' }, { value: 8, name: '侵权' },
        { value: 5, name: '广告软文' }, { value: 7, name: '涉嫌违法犯罪' }],
      bottomText: '取消'
    }
  },
  props: {
    artcle: Object,
    isShow: {
      type: Boolean,
      default: true // 如果不传值，isShow默认为true
    }
  },
  name: 'artitem',
  created () {

  },
  methods: {
    // 返回xxx天前
    formatTime: timeAgo, // formatTime就是函数  timeAgo是函数体
    // 点击取消或者返回
    onCancel () {
      if (this.bottomText === '返回') {
        this.bottomText = '取消'
        this.Actions = [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }]
        this.show = true
        return
      }
      Toast('取消成功')
    },
    // 点击选择事项
    onSelect (action, index) {
      // console.log(action) // {name:"反馈垃圾内容"}
      // console.log(index) // 索引值
      if (action.name === '反馈垃圾内容') {
        this.Actions = this.secondActions
        this.bottomText = '返回'
      } else if (action.name === '不感兴趣') {
        this.$emit('disLikeEV', this.artcle.art_id)
        this.show = false
      } else {
        this.$emit('reportEV', this.artcle.art_id, action.value)
        this.show = false
      }
    },
    // 点击遮罩栏
    overlay () {
      this.Actions = [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }]
      this.bottomText = '取消'
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>

.title {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  /deep/.van-image {
    object-fit: cover;
    width: 112.8px;
    height: 69.75px;
  }
  img{
     object-fit: cover;
    width: 112.8px;
    height: 69.75px;
    }
}
.imgs {
  /deep/.van-image {
     object-fit: cover;
    width: 112.8px;
    height: 69.75px;
  }
  img{
    object-fit: cover;
    width: 112.8px;
    height: 69.75px;
  }
}
.lable {
  span {
    margin: 0 3px;
    font-size: 9px;
    color: #969799;
  }
  /deep/.van-icon {
    color: #969799;
    float: right;
  }
  .name{color: red}
}
</style>
